<template>
  <a-row class="j-select-biz-component-box" type="flex" justify="center" align="middle" :gutter="8">
    <a-col class="left" :class="{'full': !buttons}">
      <slot name="left">
        <a-select
          mode="multiple"
          placeholder="请选择参与考勤人员"
          v-model="selectValue"
          :options="selectOptions"
          allowClear
          :disabled="disabled"
          :open="selectOpen"
          style="width: 100%;"
          @dropdownVisibleChange="handleDropdownVisibleChange"
          @click.native="visible=(buttons || disabled ?visible:true)"
        />
      </slot>
    </a-col>

    <a-col v-if="buttons" class="right">
      <a-button type="primary" icon="search" :disabled="disabled" @click="visible=true">选择</a-button>
    </a-col>

    <j-select-user-dep-sex-component-modal
      v-model="selectValue"
      :selectOptions="selectOptions"
      :visible.sync="visible"
      @options="handleOptions"
    />
  </a-row>
</template>

<script>
  import JSelectUserDepSexComponentModal from './JSelectUserDepSexComponentModal'

  export default {
    name: 'JSelectUserDepSexComponent',
    components: { JSelectUserDepSexComponentModal },
    props: {
      value: {
        type: String,
        default: ''
      },
      disabled: {
        type: Boolean,
        default: false
      },
      // 是否显示按钮，默认 true
      buttons: {
        type: Boolean,
        default: true
      },
    },
    data() {
      return {
        selectValue: [],
        selectOptions: [],
        visible: false,
        selectOpen: false,
      }
    },
    watch: {
      value: {
        immediate: true,
        handler(val) {
          //传入数据改变(点击叉号)
          if (val) {
            this.selectValue = val.split(',')
          } else {
            this.selectValue = []
          }
        }
      },
      selectValue: {
        deep: true,
        handler(val) {
          let data = val.join(',')
          if (data !== this.value) {
            //点击叉号，动态改变数据展示及修改校验
            this.$emit('input', data)
            this.$emit('change', data)
            //实时改变下拉数据源，提交数据时以该数据为准
            this.selectOptions = this.selectOptions.filter(item => {
              return val.indexOf(item.value) > -1;
            })
          }
        }
      }
    },
    methods: {
      handleOptions(options) {
        //组件传值，修改下拉数据源及提交数据源
        this.selectOptions = options;
      },
      handleDropdownVisibleChange() {
        // 解决antdv自己的bug —— open 设置为 false 了，点击后还是添加了 open 样式，导致点击事件失效
        this.selectOpen = true
        this.$nextTick(() => {
          this.selectOpen = false
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .j-select-biz-component-box {

    @width: 82px;

    .left {
      width: calc(100% - @width - 8px);
    }

    .right {
      width: @width;
      line-height: initial;
    }

    .full {
      width: 100%;
    }

    /deep/ .ant-select-search__field {
      display: none !important;
    }
  }
</style>